<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="card-header">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="识别类型" prop="ocrtype" :required="true">
            <el-radio-group v-model="form.ocrtype" @change="onocrtype">
              <el-radio label="tongyong">通用文字识别</el-radio>
              <el-radio label="shouxieshibie">手写识别</el-radio>
              <el-radio label="bangongwendang">办公文档识别</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="识别文件">
            <el-upload ref="upload" :limit="1" :headers="upload.headers" :action="upload.url"
              :disabled="upload.isUploading" :on-change="changeUpload" :before-upload="handlebeforeUpload"
              :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :on-error="handleFileError"
              :auto-upload="true" :data="upload.updata" drag>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip txt_center" slot="tip">
                <span style="padding-left: 60px;">仅允许上传<b>{{ filetype }}格式 </b>文件</span>
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <div class="text item card-wenzi-item">
        <div v-html="message"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  name: "indexasr",
  data() {
    return {
      upload: {
        // 是否显示弹出层（导入）
        open: false,
        // 弹出层标题（导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/power/ocr/uploadfiles",
        updata: { ocrtype: "" },
      },
      form: {
        ocrtype: "",
      },
      message: "",
      filetype: "jpg/png/jpeg/bmp",
    };
  },
  methods: {
    handlebeforeUpload(file) {
      this.message = "";
      if (
        this.form.ocrtype == null ||
        this.form.ocrtype == "" ||
        this.form.ocrtype == undefined
      ) {
        this.msgError("识别类型不能为空，请选择后上传识别文件");
        return false;
      }

      var flag = false;
      var filename = file.name.toLowerCase();
      if (filename.indexOf(".jpg") > -1) {
        flag = true;
      } else if (filename.indexOf(".png") > -1) {
        flag = true;
      } else if (filename.indexOf(".jpeg") > -1) {
        flag = true;
      } else if (filename.indexOf(".bmp") > -1) {
        flag = true;
      } else if (filename.indexOf(".pdf") > -1 && this.form.ocrtype == "bangongwendang") {
        flag = true;
      }

      if (!flag) {
        this.msgInfo("上传文件只能是" + this.filetype + "格式,请重新上传!");
        return false;
      }

      const filesize = file.size / 1024 / 1024;
      if (filesize > 100) {
        this.msgInfo('上传的文件大小不能超过100 MB!');
        return false;
      }
      this.upload.updata.ocrtype = this.form.ocrtype;
    },
    changeUpload(file, fileList) {
      if (fileList.length > 1 && file.status !== "fail") {
        fileList.splice(0, 1);
      } else if (file.status === "fail") {
        this.msgError("上传失败，请重新上传！");
        fileList.splice(0, 1);
      }
    },
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    handleFileError(event, file, fileList) { },
    handleFileSuccess(res, file, fileList) {
      console.log(34, file, fileList);
      if (res.code == 200) {
        this.$refs.upload.clearFiles();
        var resdata = res.data;
        for (var i = 0; i < resdata.length; i++) {
          var word = resdata[i].word;
          this.message = this.message + word + "<br>";
        }
      } else {
        this.$refs.upload.clearFiles();
        this.msgError(res.msg);
      }
      this.upload.open = false;
      this.upload.isUploading = false;
    },
    onocrtype() {
      if (this.form.ocrtype == "tongyong") {
        this.filetype = "jpg/png/jpeg/bmp";
      } else if (this.form.ocrtype == "shouxieshibie") {
        this.filetype = "jpg/png/jpeg/bmp";
      } else if (this.form.ocrtype == "bangongwendang") {
        this.filetype = "jpg/png/jpeg/bmp/pdf";
      }
      this.message = "";
    }
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  height: calc(100vh - 105px);
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: center;
  margin-left: -150px;
}

.card-wenzi-item {
  border-radius: 5px;
  border: 1px solid #ddd;
  height: 400px;
  overflow-y: auto;
  padding: 16px;
}
</style>
